<template>
	<!-- 普通弹窗 -->
	<uni-popup ref="popup" type="bottom" @change="onChange">
		<view>
			<view class="box">
				<view class="box-item">
					<text class="text-48r p-16r" style="color: black;font-weight: bold;">¥</text>
					<text class="flex-auto uni-input p-24r text-64r" :style="{color:money===''?'#999':'#333'}"
						style="font-weight: bold">{{ money === '' ? '0.00' : money }}
					</text>

					<text class="iconfont p-16r rounded-20" :class="icon" style="color: white;font-size: 30px;"></text>
				</view>
				<view class="box-item">
					<text class="box-item-name">资产名称</text>
					<uni-easyinput :styles="styles" primaryColor="rgb(0,0,0,0)" v-model="title"
						placeholder="请输入资产名称"></uni-easyinput>
				</view>
				<view class="box-item">
					<text class="box-item-name">备注信息</text>
					<uni-easyinput :styles="styles" maxlength="100" primaryColor="rgb(0,0,0,0)" v-model="remark"
						placeholder="备注信息(选填)"></uni-easyinput>
				</view>
			</view>

			<monokeyboard :value="money" :show="true" :btnColor="systemTheme.bg" :isDecimal="true" confirmText="确定"
				@change="get_number" @confirm="handleSave()">
			</monokeyboard>

		</view>
	</uni-popup>
	<view>
	</view>
</template>


<script>
	import monokeyboard from '@/components/keyboard/mono-keyboard.vue'
	import {
		useSystem
	} from "@/store/theme";
	import dayjs from 'dayjs'
	import {
		addAsset
	} from '@/api/api.js'


	export default {
		emits: ['close', 'updateConfirm'],
		data() {
			return {
				baseFormData: {},
				id: null,
				title: '',
				icon: '',
				type_id: null,
				create_time: null,
				remark: null,
				moneyArr: [],
				styles: {
					color: '#000000',
					borderColor: 'rgb(0,0,0,0)'
				}
			}
		},
		props: {
			obj: {
				type: Object
			},
			titleUpdate: {
				type: Boolean,
				default: true
			},
			visible: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			money() {
				const str = this.moneyArr.join('')
				if (str) {
					return str
				}
				return ''
			},
		},
		components: {
			monokeyboard
		},
		setup() {
			const systemTheme = useSystem()
			return {
				systemTheme
			}
		},
		watch: {
			visible(val) {
				if (val) {
					this.$refs.popup.open()
				} else {
					this.$refs.popup.close()
				}
			}
		},
		methods: {
			// popup弹出初始化内容
			onChange(e) {
				if (e.show) {
					this.init()
				} else {
					this.$emit('close')
				}
			},
			async init() {
				console.log('this.obj',this.obj)
				this.title = this.obj.title
				this.moneyArr = this.obj.num != null ? this.obj.num.toString().split('') : [];
				this.type_id = this.obj.type_id
				this.remark = this.obj.remark
				this.icon = this.obj.icon
				this.id = this.obj.id
			},
			async handleSave() {
				if (this.title === '' || this.title === null) {
					uni.showToast({
						title: "请填写资产名称",
						icon: 'error'
					})
					return;
				}

				let obj = {
					id: this.id,
					title: this.title,
					type_id: this.type_id,
					create_time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
					remark: this.remark,
					num: parseFloat(this.money)
				}

				await this.$emit('updateConfirm', obj)
			},
			get_number(e) {
				this.moneyArr = [...e]
			}
		}


	}
</script>

<style scoped lang="scss">
	.box {
		padding: 15px;
		background-color: #F7F7F7;
		border-radius: 10px 10px 0 0;
		display: flex;
		flex-direction: column;

		.box-item-name {
			width: 60px;
			font-size: 12px;
		}

		.box-item {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 5px;
		}
	}
</style>